$.fn.extend({
    //top 栏 的鼠标移入显示，移出隐藏方法
    mouseTop() {
        this.on("mouseenter", function () {
            $(this).find("div").show();
            $(this).find("span").css({
                top: 0,
                right: -5,
                transform: "rotate(180deg)"
            })
        }).on("mouseleave", function () {
            $(this).find("div").hide();
            $(this).find("span").css({
                top: 2,
                right: 8,
                transform: "rotate(0deg)"
            })
        })
    },
    //点击协议弹窗
    clickXieYi() {
        this.find("span").eq(1).on("click", () => {
            location = "index.html";
        })
        this.find("p").eq(1).on("click", () => {
            this.parent().hide();
        })

    },
    //表单验证
    formVerify() {
        let self = this;
        let slidFlag = false;
        function slide() {
            let $slideBox = self.find(".slide div");
            $slideBox.on("mousedown", function (e) {
                let disx = e.pageX - $slideBox.offset().left;
                $(document).on("mousemove", function (e) {
                    let elX = e.pageX - disx - $slideBox.parent().offset().left;
                    if (elX <= 0) {
                        elX = 0;
                    }
                    if (elX >= $slideBox.parent().width() - $slideBox.width()) {
                        elX = $slideBox.parent().width() - $slideBox.width();
                    }
                    $slideBox.css("left", elX);
                    $slideBox.prev().css("width", $slideBox.parent().width() - elX);
                    $slideBox.prev().css("margin-left", elX);
                    if (elX == $slideBox.parent().width() - $slideBox.width()) {
                        $slideBox.html("✅")
                        $slideBox.css("font-size", 22)
                        $slideBox.prev().prev().removeClass("sl_txt").addClass("sl_txt1");
                        $slideBox.prev().prev().css("font-size", 16)
                        $slideBox.prev().prev().html("验证成功");
                        $slideBox.parent().next().hide();
                        slidFlag = true;
                        return;
                    }
                })
                $(document).on("mouseup", function () {
                    if ($slideBox.parent().width() - $slideBox.width() != $slideBox.position().left) {
                        $slideBox.css("left", 0);
                        $slideBox.prev().css("width", "100%");
                        $slideBox.prev().css("margin-left", 0);
                    } else {
                        $slideBox.off()
                    }
                    $(document).off();

                })
            })
            return;
        }
        class Verify {
            constructor(el, reg) {
                this.$el = el;
                this.flag = true;
                this.reg = reg;
            }
            focus() {
                this.$el.on("focus", () => {
                    this.$el.next().next().show();
                }).on("blur", () => {
                    this.regRight();
                    this.$el.next().next().hide();
                })
            }
            //判断正则
            regRight() {
                if (this.reg.test(this.$el.val())) {
                    this.flag = true;
                    this.$el.next().hide();
                } else {
                    this.flag = false;
                    this.$el.next().show();
                }
            }
        }
        let user = new Verify(this.find("input[name='name']"), /^[a-zA-Z0-9_-]{5,25}$/);
        user.focus();
        let pwd = new Verify(this.find("input[name='pwd']"), /^[a-zA-Z0-9]{5,25}$/);
        pwd.focus();
        self.find("input[name='pwd_two']").on("blur", () => {
            if (self.find("input[name='pwd_two']").val() != self.find("input[name='pwd']").val()) {
                pwd.flag = false;
                self.find("input[name='pwd_two']").next().show();
            } else {
                pwd.flag = true;
                self.find("input[name='pwd_two']").next().hide();
            }
        })
        let phone = new Verify(this.find("input[name='phone']"), /^\d/);
        phone.focus();
        slide();

        this.find("button").on("click", (e) => {
            let check = this.find("input[type='checkbox']").prop("checked");
            e.preventDefault();
            user.$el.blur();
            pwd.$el.blur();
            self.find("input[name='pwd_two']").blur();
            phone.$el.blur();
            if (!slidFlag) {
                this.find(".slide").next().show();
            }
            if (!check) {
                this.find(".tyxy").show();
            } else {
                this.find(".tyxy").hide();
            }
            // console.log(user.flag, pwd.flag, phone.flag, slidFlag, check);
            if (!(user.flag && pwd.flag && phone.flag && slidFlag && check)) {
                slidFlag = false;
                let $slideBox = self.find(".slide div");
                $slideBox.html(">>");
                $slideBox.css("font-size", 14)
                $slideBox.prev().prev().removeClass("sl_txt1").addClass("sl_txt");
                $slideBox.prev().prev().css("font-size", 16)
                $slideBox.prev().prev().html("请按住滑块，拖到最右边");
                $slideBox.parent().next().hide();
                $slideBox.css("left", 0);
                $slideBox.prev().css("width", "100%");
                $slideBox.prev().css("margin-left", 0)
                slide();
                console.log(1);
                return;
            }
            //发送请求
            //访问服务器
            let data = {
                user: user.$el.val(),
                pwd: pwd.$el.val(),
                phone: phone.$el.val()
            }
            $.ajax({
                url: "http://127.0.0.1:8080/reg",
                type: "post",
                data
            }).then(function (res) {
                let { message, code } = res;
                alert(message)
                if (code == 200) {
                    [] = ['-;uswaz`']
                    setTimeout(function () {
                        location = "login.html"
                    }, 1000)
                }
            })

        })
    },

})

window.onload = function () {
    $(".ms_top").mouseTop(); //top 栏 的鼠标移入显示，移出隐藏方法
    $(".reg_xy").clickXieYi(); //协议弹窗
    $(".reg_form").formVerify();
}



